<script setup>
import MenuComVue from "@/components/menuCom.vue";
import { menus } from "@/api/menusApi";

let store = useStore();

let menuList = ref([]);

onMounted(async () => {
  let { data, meta } = await menus();
  menuList.value = data;
  console.log(data);
});
</script>


<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="store.state.menuPath"
              text-color="#fff"
              router
            >
              <MenuComVue :menuList="menuList"></MenuComVue>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  // line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

.el-menu-vertical-demo {
  height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container {
  width: 100vw;
  height: 100vh;
}
</style>